<script setup>
import {  ref } from 'vue';
import UserInfo from './UserInfo/UserInfo.vue';
import Address from './Address/Address.vue'
import MyOrder from './MyOrder/MyOrder.vue'

// tab选项切换
const tabIndex = ref('0')
function switchTab(e){
    if(e.target.tagName === 'DD'){
        tabIndex.value =  e.target.dataset.index
    }
}
function checkOrder(e){
    tabIndex.value = e + ''
}
</script>

<template>
    <div class="my">
        <div class="content">
            <div class="left">
                <dl @click="switchTab">
                    <dt>账户管理</dt>
                    <dd data-index="0">个人信息</dd>
                    <dd data-index="1">收货地址</dd>
                    <dd data-index="2">我的订单</dd>
                    <dd data-index="3">修改密码</dd>
                    <dd data-index="4">退出登录</dd>
                </dl>
            </div>
            <UserInfo @goOrder="checkOrder" v-show="tabIndex === '0'"></UserInfo>
            <Address v-show="tabIndex === '1'"></Address>
            <MyOrder v-show="tabIndex === '2'"></MyOrder>
        </div>
    </div>
</template>

<style scoped lang="less">
.my {
    height: 814px;

    .content {
        height: 100%;


        .left {
            float: left;
            width: 234px;
            padding: 20px 0 0 50px;
            background-color: #fff;

            dt {
                font-size: 18px;
            }

            dd {
                margin: 5px 0;
                color: #757575;
            }
        }

     
    }

}
</style>
